@mixin fullShow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  user-select: none;
}

.my-cropper {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  user-select: none;
  background-image: url();

  .outer-shadow {
      cursor: move;
      @include fullShow;
      background-color: rgba(0, 0, 0, .5);
  }

  .original-box {
      overflow: hidden;
      @include fullShow;

      .original-image-box {
          @include fullShow;

          img {
              user-select: none;
              -webkit-user-drag: none;
              //max-width: 100%;
              height: 100%;
          }
      }
  }

  .cut-box {
      @include fullShow;
      cursor: move;
      background-color: rgba(255, 255, 255, 0.2);
      outline: 1px solid rgba(51, 153, 255, .75);

      .resolution {
          padding: 0 4px;
          position: absolute;
          font-size: 12px;
          top: 0;
          left: 0;
          transform: translateY(-100%);
          color: #ffffff;
          background-color: rgba(0, 0, 0, 0.4);
      }

      .cut-image-box {
          height: 100%;
          width: 100%;
          overflow: hidden;

          img {
              user-select: none;
              -webkit-user-drag: none;
          }
      }

      // 操作线的粗细
      $lineBold: 5px;
      // 线冒出框框外一点
      $linePosition: -3px;

      .action-line {
          position: absolute;

          &.left-line {
              cursor: w-resize;
              top: 0;
              left: $linePosition;
              width: $lineBold;
              height: 100%;
          }

          &.top-line {
              cursor: n-resize;
              top: $linePosition;
              left: 0;
              height: $lineBold;
              width: 100%;
          }

          &.right-line {
              cursor: e-resize;
              top: 0;
              right: $linePosition;
              height: 100%;
              width: $lineBold;
          }

          &.bottom-line {
              cursor: s-resize;
              bottom: $linePosition;
              left: 0;
              height: $lineBold;
              width: 100%;
          }
      }

      // 球向外移动的位置
      $pointPosition: -4px;

      // 操作球
      .action-point {
          position: absolute;
          background-color: rgba(51, 153, 255, .75);
          width: 8px;
          height: 8px;
          border-radius: 100%;

          &.top-left-point {
              top: $pointPosition;
              left: $pointPosition;
              cursor: nw-resize;
          }

          &.top-center-point {
              top: $pointPosition;
              right: 0;
              left: 0;
              margin: 0 auto;
              cursor: n-resize;
          }

          &.top-right-point {
              top: $pointPosition;
              right: $pointPosition;
              cursor: ne-resize;
          }

          &.right-center-point {
              top: 0;
              bottom: 0;
              right: $pointPosition;
              margin: auto 0;
              cursor: e-resize;
          }

          &.right-bottom-point {
              bottom: $pointPosition;
              right: $pointPosition;
              cursor: se-resize;
          }

          &.bottom-center-point {
              bottom: $pointPosition;
              right: 0;
              left: 0;
              margin: 0 auto;
              cursor: s-resize;
          }

          &.bottom-left-point {
              bottom: $pointPosition;
              left: $pointPosition;
              cursor: sw-resize;

          }

          &.left-center-point {
              left: $pointPosition;
              top: 0;
              bottom: 0;
              margin: auto 0;
              cursor: w-resize;
          }
      }
  }
}